<template>
	<view class="order">
		<!-- 选项卡 -->
		<view class="tabs-wrap">
			<com-tabs gap="26rpx" padding="0 12rpx" :tabs="tabs" :active="params.order_status" @change="changeTab"></com-tabs>
		</view>
		
		<view class="lists">
			<block v-if="lists.length">
				<view class="list-item" v-for="(item,index) in lists" :key="index" @click="goOrderDetails(item)">
					<view class="title">{{item.product_title}}</view>
					<view class="info-list">
						<view class="info-item">订单编号：{{item.order_no}}</view>
						<view class="info-item">租赁日期：{{item.start_rent_date}}至{{ item.end_rent_date }}</view>
						<view class="info-item">租赁日数：{{item.rent_day}}天</view>
						<view class="info-item">租赁方式：{{item.is_direct === 0 ? '服务商' : '平台直租'}}</view>
						<view class="info-item">订单总金额：{{item.pay_total_fee | formatPrice($formatPrice)}}元</view>
						<view v-if="item.order_status === 2" class="info-item">待支付金额：{{item.unpaid_fee | formatPrice($formatPrice)}}元</view>
						<view class="info-item">订单状态：
							<view class="tags">
								<!--  0全部/2待付款/3待确认/4待发货/5待取货/6租赁中/7待归还/1已完成/-1已取消 -->
								<view v-if="item.order_status === -1" class="tag-item ">已取消</view>
								<view v-if="item.order_status === 1" class="tag-item tag-success">已完成</view>
								<view v-if="item.order_status === 2" class="tag-item tag-wait">待付款</view>
								<view v-if="item.order_status === 3" class="tag-item tag-wait">待确认</view>
								<view v-if="item.order_status === 4" class="tag-item tag-wait">待发货</view>
								<view v-if="item.order_status === 5" class="tag-item tag-wait">待取货</view>
								<view v-if="item.order_status === 6" class="tag-item tag-wait">租赁中</view>
								<view v-if="item.order_status === 7" class="tag-item tag-wait">待归还</view>
							</view>
						</view>
					</view>
					
					<view v-if="item.meta.length" class="item-btns">
						<button v-if="item.meta.includes('delete')" class="item-btn cancel-btn" @click.stop="handleDelete(item)">删除订单</button>
						<button v-if="item.meta.includes('cancel')" class="item-btn cancel-btn" @click.stop="handleCancel(item)">取消订单</button>
						<button v-if="item.meta.includes('pay')" class="item-btn confirm-btn" @click.stop="payment(item)">立即支付</button>
					</view>
				</view>
			</block>
			
			<view v-else class="empty">暂无数据</view>
		</view>
		
		<!-- 取消订单 -->
		<cancel-popup ref="cancel" @refresh="getData"></cancel-popup>
		<!-- 授权 -->
		<authorize-popup ref="authorize" @rejects="handleRejects" @success="getData"></authorize-popup>
		<!-- 对话框 -->
		<com-dialog ref="dialog" open-type="" cancelButtonText="取消" confirmButtonText="确定" @success="getData()"></com-dialog>
	</view>
</template>

<script>
	import { mapState } from 'vuex'
	import formatPrice from '@/mixins/formatPrice.js';
	import cancelPopup from './components/cancel-popup.vue';
	
	export default {
		mixins:[formatPrice],
		components: {cancelPopup},
		data() {
			return {
				tabs: [],
				activeTab: 0,
				lists: [],
				params: {
					page: 1,	// 页码
					limit: 10, // 页数
					key: '', // 关键字
					order_status: 0
				},
				loading: true
			};
		},
		computed: {
			...mapState('login', ['token'])
		},
		onLoad(options) {
		},
		onShow() {
			this.getOrderStatusData()
			const orderTab = this.$store.state.common.orderTab
			if (orderTab) {
				this.params.order_status = orderTab
			}
			if (this.token) {
				this.getData()
				uni.$emit('hide-authorize')
			} else {
				this.$nextTick(()=> {
					uni.$emit('show-authorize')
				})
			}
		},
		onReachBottom() {
			if (this.more) {
				this.getList()
			}
		},
		onUnload() {
			uni.$off('show-authorize')
			uni.$off('hide-authorize')
		},
		onShareAppMessage(){},
		onShareTimeline() {},
		methods: {
			// 删除订单
			handleDelete(item) {
				uni.$emit('show-dialog', {
					title: '提示',
					content: '是否删除订单',
					onConfirm: ()=> {
						this.$api.userAgentOrderDeleteApi(item.gid).then(res=> {
							uni.showToast({
								icon: 'none',
								title: '删除成功'
							})
							uni.$emit('hide-dialog')
							this.getData()
						}).catch(err=> {
							console.log('err', err);
						})
					},
					onCancel: ()=> {
						uni.$emit('hide-dialog')
					}
				});
			},
			// 取消订单
			handleCancel(item) {
				this.$refs.cancel.open(item)
			},
			// 立即付款
			async payment(item) {
				const {
					code
				} = await uni.login()
				const params = {
					appid: this.$store.state.common.appid, // string 必需 微信小程序appid
					order_gid: item.gid, // string 订单gid 必需 示例值: 71e3f23b-b20d-4877-b32a-b2fd23a7ddc8
					code: code, // string  必需 wx.login中的code
					order_price: item.unpaid_fee, // number 订单支付金额 必需 示例值: 1332
				}
				this.$api.userAgentOrderPaymentApi(params).then(res => {
					uni.showLoading({
						title: '支付中···'
					})
					uni.requestPayment({
						provider: "wxpay",
						orderInfo: {},
						...res.data,
						success: (res) => {
							uni.hideLoading()
							this.getDtail()
						},
						fail: (err) => {
							uni.hideLoading()
							uni.showToast({
								icon: 'none',
								title: '支付失败'
							})
						},
						complete: () => {
							// this.status = 'complete'
						}
					})
				}).catch(err => {
					console.log('err', err);
				})
			},
			// 获取订单状态数据
			getOrderStatusData() {
				this.$api.userAgentOrderStatusDataApi().then(res=> {
					this.tabs = res.data.map(item=> ({
						label: item.title,
						value: item.name,
						count: item.count,
						show: item.show,
					}))
					if (!this.params.order_status) {
						this.params.order_status = this.tabs[0].value
					}
				}).catch(err=> {
					console.log('err', err);
				})
			},
			// 拒绝登录
			handleRejects() {
				uni.switchTab({
					url: '/pages/index/index'
				})
			},
			changeTab(value) {
				this.params.order_status = value
				this.$store.commit('common/SET_ORDER_TAB', value)
				this.getData()
			},
			// 前往订单详情
			goOrderDetails(item) {
				uni.navigateTo({
					url: '/pages/order/detials/detials?orderId='+item.gid
				})
			},
			getData() {
				this.params.page = 1
				this.getList()
			},
			getList() {
				this.loading = true
				const params = {...this.params}
				params.order_status = this.params.order_status === 999 ? -1 : this.params.order_status
				this.$api.userAgentOrderListApi(params).then(res=> {
					if (this.params.page === 1) {
						this.lists = []
					}
					
					if (res.data.length === 0 || res.data.length < this.params.limit) {
						this.more = false
					} else {
						this.more = true
						this.params.page++
					}
					
					const oldList = [...this.lists]
					this.lists = oldList.concat(res.data)
					
				}).catch(err=> {
					console.log('err', err);
				}).finally(()=> {
					this.loading = false
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.order {
		padding-bottom: calc(200rpx+ constant(safe-area-inset-bottom)); ///兼容 IOS<11.2/
		padding-bottom: calc(200rpx + env(safe-area-inset-bottom)); ///兼容 IOS>11.2/
		
		.tabs-wrap {
			position: sticky;
			top: 0;
			z-index: 999;
			padding: 0 32rpx;
			background-color: #FFFFFF;
		}
	
		.lists {
			padding: 52rpx 32rpx;
			
			.list-item {
				padding: 32rpx;
				margin-bottom: 32rpx;
				border-radius: 26rpx;
				background-color: #FFFFFF;
			}
			
			.title {
				color: #000000;
				font-size: 34rpx;
				font-weight: 400;
				text-align: left;
				line-height: 46rpx;
			}
			
			.info-list {
				gap: 8rpx;
				display: flex;
				padding-top: 38rpx;
				// padding-bottom: 38rpx;
				flex-direction: column;
			}
			
			.info-item {
				color: #999999;
				font-size: 26rpx;
				text-align: left;
				font-weight: 400;
				line-height: 36rpx;
				
				display: flex;
				align-items: center;
			}
			
			.tags {
				display: flex;
				align-items: center;
				gap: 10rpx;
			}
			
			.tag-item {
				display: flex;
				align-items: center;
				justify-content: center;
				
				padding: 4rpx 8rpx;
				border-radius: 8rpx;
				background-color: #868686;
				
				color: #FFFFFF;
				font-size: 18rpx;
				font-weight: 400;
				line-height: 24rpx;
				text-align: left;
			}
			
			.tag-success {
				background-color: #009D6E;
			}
			
			.tag-complate {
				background-color: #D4D4D4;
			}
			
			.tag-wait {
				background-color: #003D99;
			}
			
			.item-btns {
				display: flex;
				align-items: center;
				gap: 14rpx;
				padding-top: 24rpx;
			}
			
			.item-btn {
				flex: 1;
				// padding: 0;
				// margin: 0;
				height: 62rpx;
				// border-radius: 26rpx;
				// background: var(--gradient-color-vertical);
				
				// display: flex;
				// align-items: center;
				// justify-content: center;
				
				// &::after {
				// 	border: none;
				// }
				
				// color: #FFFFFF;
				// font-size: 28rpx;
				// font-weight: 400;
				// line-height: 38rpx;
				// text-align: left;
			}
		}
	}
</style>
